<template>

    <div>
        <div v-show="active==1">
            <span style="margin-left: 500px;font-size: 30px">设备维保</span>

            <el-divider content-position="right"></el-divider>

            <div style="width: 800px">
                <span style="font-size:20px;color: red">基本信息</span>
                <el-form ref="form" :model="Devicemaintain" label-width="80px">
                    <el-form-item label="维保名称">
                        <el-input v-model="Devicemaintain.maintainName"></el-input>
                    </el-form-item>
                    <el-form-item label="项目名称">
                        <el-input v-model="Devicemaintain.projectName" @focus="getPid" readonly ></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="Devicemaintain.comment"></el-input>
                    </el-form-item>
                    <el-divider content-position="right"></el-divider>
                    <span style="font-size:20px;color: red">附件</span>
                    <el-container>
                        <el-form-item label="相关文件:">
                            <el-upload
                                    name="multipartfile"
                                    action="http://localhost/upload"
                                    :headers="{token:this.$store.state.token}"
                                    :data="{folder:'DeviceMaintain'}"
                                    class="upload-demo"
                                    ref="upload"
                                    :limit="1"
                                    :multiple="false"
                                    :auto-upload="false"
                                    :on-success="handleUploadSuccess">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                            </el-upload>
                        </el-form-item>
                        <el-input v-model="Devicemaintain.files" v-show="false"></el-input>
                    </el-container>
                    <el-table
                            :data="enclosures"
                            border
                            style="width: 100%"
                            v-if="enclosureTab">
                        <el-table-column
                                fixed
                                prop="fileName"
                                label="文件名">
                        </el-table-column>
                        <el-table-column
                                prop="realName"
                                label="上传人">
                        </el-table-column>
                        <el-table-column
                                prop="time"
                                label="上传时间">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作">
                            <template slot-scope="scope">
                                <el-button @click="selectEnclosure(scope.row)" type="text" size="small">查看</el-button>
                                <el-button @click="delEnclosure(scope.row)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-divider content-position="right"></el-divider>
                    <span style="font-size:20px;color: red">设备需用计划明细</span>




                    <el-table :data="materialInfos"
                              stripe
                              border>
                        <el-table-column label="设备名称" :resizable="true">
                            <template scope="scope">
                                <el-input v-model="scope.row.materialName" readonly @focus="getMaterialName"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="unitModel"
                                label="规格型号">
                        </el-table-column>
                        <el-table-column
                                prop="unit"
                                label="单位">
                        </el-table-column>
                        <el-table-column label="维保内容" :resizable="true">
                            <template scope="scope">
                                <el-input  v-model="scope.row.maintainContent"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="工时数" :resizable="true">
                            <template scope="scope">
                                <el-input  type="number"  v-model="scope.row.workHour"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="人工合计" :resizable="true">
                            <template scope="scope">
                                <el-input type="number" @blur="getprice(scope.row)"  v-model="scope.row.laborFee"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="材料合计" :resizable="true">
                            <template scope="scope">
                                <el-input type="number" @blur="getprice(scope.row)"  v-model="scope.row.materialFee"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="sumAmount"
                                label="小计">
                        </el-table-column>
                    </el-table>
                    <div>
                        <span>合计:{{price}}</span>
                        <span>金额大写:{{totalUpper}}</span>
                    </div>



                    <el-form-item>
                        <el-button type="primary" @click="save" style="margin-left: 600px" v-if="saveStatus">立即创建</el-button>
                        <el-button type="primary" @click="update" style="margin-left: 600px" v-if="updateStatus">修改</el-button>
                    </el-form-item>
                </el-form>

            </div>


            <el-dialog
                    title="项目名称"
                    :visible.sync="dialogVisible"
                    width="70%">
                <project-type-big-data v-on:row="row" v-if="dialogVisible" ></project-type-big-data>
            </el-dialog>

            <el-dialog
                    title="设备名称选择"
                    :visible.sync="dialogVisible2"
                    width="60%">
                <material-name-big-data v-on:checked="checked" ></material-name-big-data>
            </el-dialog>
        </div>

        <div>
            <photo v-show="active==2" v-on:fh="Phonefh"  :phonePath="phonePath" ></photo>
        </div>

    </div>
</template>

<script>

    import ProjectTypeBigData from '../../../components/common/projectInfo/ProjectInfoList.vue'
    import MaterialNameBigData from '../../../components/common/material/MaterialList.vue'
    import Photo from '../modularOne/Photo.vue'

    import  DeviceMaintainService from '../../../model/mfy/DeviceMaintainService.js'
    const deviceMaintainService= DeviceMaintainService.getInstance();

    export default {
        name: "DeviceOilUsed",
        data(){
            return{
                active:1,
                Devicemaintain:{},
                dialogVisible:false,
                dialogVisible2:false,
                enclosures:[],//附件
                enclosureTab:false,
                phonePath:'',
                saveStatus:true,
                price:'',
                updateStatus:false,
                totalUpper:'',
                materialInfos:[
                    {
                        'materialName':'',
                        'unitModel':'',
                        'unit':'',
                        'laborFee':'',
                        'maintainContent':'',
                        'workHour':'',
                        'materialFee':'',
                    }
                ],
                attids:''
            }
        },
        methods:{
            getprice(row){
                row.sumAmount=parseInt(row.laborFee)+parseInt(row.materialFee);
                var p = 0;
                this.materialInfos.forEach(i=>{
                    p=p+i.sumAmount
                })
                this.price=p;
                this.totalUpper=this.smallToBig(this.price);
            },
            getPid(){
                this.dialogVisible=true
            },
            row(row){
                this.dialogVisible=false
                this.Devicemaintain.projectName=row.projectName
                this.Devicemaintain.pId=row.id
            },
            submitUpload(){
                this.$refs.upload.submit();
            },
            handleUploadSuccess(response,file){
                this.enclosureTab=true
                var enclosure ={};
                enclosure.fileName = file.name
                enclosure.filePath = response.data
                enclosure.time = this.datetime();
                enclosure.realName = sessionStorage.getItem("realName")
                this.enclosures.push(enclosure)
                this.Devicemaintain.filePath = response.data
            },
            selectEnclosure(row){
                this.phonePath=row.filePath
                this.active++
            },
            delEnclosure(row){
                this.enclosures.forEach(i=>{
                    if(i.time==row.time){
                        this.enclosures.pop();
                    }
                })
            },
            datetime(){
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth()+1;
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
                var time = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
                return time;
            },
            Phonefh(){
                this.active--
            },
            getMaterialName(){
                this.price=''
                this.dialogVisible2=true
            },
            checked(checkedRow){
                this.dialogVisible2=false
                var a =[];
                checkedRow.forEach(i=>{
                    a.push({
                        'materialId':i.id+"",
                        'materialName':i.materialName,
                        'unitModel':i.unitModel,
                        'unit':i.unit,
                        'laborFee':'',
                        'maintainContent':'',
                        'workHour':'',
                        'materialFee':'',
                    })
                })
                this.materialInfos=a;
            },
            save(){

                var params={}
                this.materialInfos.forEach(i=>{
                    i.materialId=i.materialId+""
                    i.maintainContent=i.maintainContent+""
                    i.workHour=i.workHour+""
                    i.laborFee=i.laborFee+""
                    i.materialFee=i.materialFee+""
                    i.sumAmount=i.sumAmount+""
                })
                this.Devicemaintain.price=this.price+""
                this.Devicemaintain.totalUpper=this.totalUpper
                params.enclosures=this.enclosures
                params.Devicemaintain=this.Devicemaintain
                params.materialInfos=this.materialInfos
                console.log(params);
                deviceMaintainService.save(params).then(()=>{
                    this.$message.success("添加成功!");
                    this.$router.push({name:"sbwbmx"})
                })
            },
            update(){
                var params={}

                this.enclosures.forEach(i=>{
                    i.id=i.id+""
                })
                for(var i =0;i<this.enclosures.length;i++){
                    this.enclosures[i].id=this.attids.split(",")[i]
                }
                params.enclosures=this.enclosures
                this.Devicemaintain.price=this.price+""
                params.Devicemaintain=this.Devicemaintain
                this.materialInfos.forEach(i=>{
                    i.id=i.id+""
                    i.materialId=i.materialId+""
                    i.maintainContent=i.maintainContent+""
                    i.workHour=i.workHour+""
                    i.materialFee=i.materialFee+""
                    i.sumAmount=i.sumAmount+""
                    i.laborFee=i.laborFee+""
                })
                params.materialInfos=this.materialInfos
                console.log(params);
                deviceMaintainService.update(params).then(()=>{
                    this.$message.success("修改成功!");
                    this.$router.push({name:"sbwbmx"})
                })


            },
            smallToBig(money) {
                //  将数字金额转换为大写金额
                var cnNums = new Array(
                    "零",
                    "壹",
                    "贰",
                    "叁",
                    "肆",
                    "伍",
                    "陆",
                    "柒",
                    "捌",
                    "玖"
                ); //汉字的数字
                var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
                var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
                var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
                var cnInteger = "整"; //整数金额时后面跟的字符
                var cnIntLast = "元"; //整数完以后的单位
                //最大处理的数字
                var maxNum = 999999999999999.9999;
                var integerNum; //金额整数部分
                var decimalNum; //金额小数部分
                //输出的中文金额字符串
                var chineseStr = "";
                if (money == "") {
                    return "";
                }

                money = parseFloat(money);
                if (money >= maxNum) {
                    //超出最大处理数字
                    return "超出最大处理数字";
                }
                if (money == 0) {
                    chineseStr = cnNums[0] + cnIntLast + cnInteger;
                    return chineseStr;
                }

                //四舍五入保留两位小数,转换为字符串
                money = Math.round(money * 100).toString();
                integerNum = money.substr(0, money.length - 2);
                decimalNum = money.substr(money.length - 2);

                //获取整型部分转换
                if (parseInt(integerNum, 10) > 0) {
                    var zeroCount = 0;
                    var IntLen = integerNum.length;
                    for (var i = 0; i < IntLen; i++) {
                        var n = integerNum.substr(i, 1);
                        var p = IntLen - i - 1;
                        var q = p / 4;
                        var m = p % 4;
                        if (n == "0") {
                            zeroCount++;
                        } else {
                            if (zeroCount > 0) {
                                chineseStr += cnNums[0];
                            }
                            //归零
                            zeroCount = 0;
                            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
                        }
                        if (m == 0 && zeroCount < 4) {
                            chineseStr += cnIntUnits[q];
                        }
                    }
                    chineseStr += cnIntLast;
                }
                //小数部分
                if (decimalNum != "") {
                    var decLen = decimalNum.length;
                    for (var ii = 0; ii < decLen; ii++) {
                        var nn = decimalNum.substr(ii, 1);
                        if (n != "0") {
                            chineseStr += cnNums[Number(nn)] + cnDecUnits[ii];
                        }
                    }
                }
                if (chineseStr == "") {
                    chineseStr += cnNums[0] + cnIntLast + cnInteger;
                } else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
                    chineseStr += cnInteger;
                }
                return chineseStr;
            }

        },
        created() {

        },
        watch : {
            '$route' (to, from) {
                if(from.path=='/sbwbmx' &&  this.$route.params.search[1].label=='修改'){
                    this.saveStatus=false;
                    this.updateStatus=true;
                    this.Devicemaintain=this.$route.params.search[0]
                    this.Devicemaintain.pId=this.$route.params.search[0].pid
                    deviceMaintainService.selectEnclosures(this.$route.params.search[0].attachIds).then((response)=>{
                        this.attids = this.$route.params.search[0].attachIds;
                        this.enclosureTab=true;
                        response.data.data.forEach(i=>{
                            i.time=this.datetime(),
                                i.realName=sessionStorage.getItem("realName")
                        })
                        this.enclosures=response.data.data;
                    })
                    deviceMaintainService.selectMaterialInfos(this.$route.params.search[0].id).then((response)=>{
                        this.materialInfos=response.data.data;
                    })
                }else{
                    this.Devicemaintain={}
                    this.enclosures=[]
                    this.materialInfos=[]
                }
            }
        },
        components:{
            ProjectTypeBigData,
            Photo,
            MaterialNameBigData
        }
    }
</script>

<style scoped>

</style>
